<template>
    <div class="common">
        <innerCommon 
            :location="location"
        >
            <template slot="left">
                <span>{{type==0?'新增':'修改'}}</span>
            </template>
            <div slot="right">
                <a-button type="primary" @click="returnBack()">返回</a-button>
            </div>
            <div slot="table">
                <eform
                    v-if="fields||type==0"
                    :formData="formData"
                    class="form"
                    ref="form"
                    :fields="fields"
                >
                    <div slot="edphase">
                        <a-select 
                            placeholder="教育阶段" 
                            v-decorator="['edPhase',{rules: [{ required: true, message: '请选择教育阶段' }]}]"
                            @change="handleEdphase">
                            <a-select-option v-for="(item,index) in edphaseList" :key="index" :value="item.id">{{item.name}}</a-select-option>
                        </a-select>
                    </div>
                    <div slot="major">
                        <a-select 
                            placeholder="专业方向" 
                            v-decorator="['majorId',{rules: [{ required: true, message: '请选择专业方向' }]}]"
                            @change="handleMajor">
                            <a-select-option v-for="(item,index) in majorList" :key="index" :value="item.id">{{item.name}}</a-select-option>
                        </a-select>
                    </div>
                    <div slot="cover" style="display:flex">
                        <eUpload
                            @getUrl="getUrl"
                            v-decorator="['cover',{rules: [{ required: true, message: '请上传封面' }]}]"
                            :imageUrl="imageUrl"
                            :size="'284*160'"
                        ></eUpload>
                    </div>
                    <div slot="content">
                        <eQuill
                            @getQuillContent="getQuillContent"
                            v-decorator="['content',{rules: [{ required: true, message: '请输入内容' }]}]"
                            :defaultData="quillInfo"
                        ></eQuill>
                    </div>
                    <div slot="course" class="programCourse">
                        <a-button 
                            @click="openCourseBox()" 
                            v-decorator="['courseId',{rules: [{ required: true, message: '选择推荐课程' }]}]"
                        >选择课程</a-button>
                        <a-table 
                            :columns="selectCourseColumns" 
                            :locale="{'emptyText': '暂无数据'}"
                            size="middle"
                            :data-source="selectCourseList" 
                            :pagination="false"
                            :rowKey="record=>record.id"
                            :showHeader="false"
                            >
                            <div slot="action" slot-scope="index,record"  class="tableAction">
                                <confirmBox
                                    @handleOk="deleteCourse(record)"
                                    :typeName="'删除'"
                                    :noticeInfo="record.title"
                                    :noticeType="'课程'"
                                ></confirmBox>
                            </div>
                        </a-table>
                    </div>
                </eform>
                <div class="submitBtn">
                    <a-button @click="returnBack()">取消</a-button>
                    <a-button type="primary" @click="save()">保存</a-button>
                </div>
            </div>
        </innerCommon>

        <!-- 课程弹框 -->
        <a-modal
            title="课程列表"
            :visible="courseModal"
            @ok="addCourse()"
            style="top:50px"
            width="800px"
            @cancel="courseModal=false"
            okText="确认"
            cancelText='取消'
            >
            <div class="body">
                <div class="header">
                    <majorModule
                        @submitSearch="submitSearch"
                    ></majorModule>
                </div>
                <a-table 
                    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                    :columns="columns" 
                    :locale="{'emptyText': '暂无数据'}"
                    size="middle"
                    :data-source="courseList" 
                    :pagination="pagination"
                    :rowKey="record=>record.id"
                    @change="changePage"
                    >
                </a-table>
            </div>
            
        </a-modal>

    </div>
</template>
<script>
const selectCourseColumns=[
    {
        title: '课程名称',
        dataIndex: 'title',
    },{
        title: '专业方向',
        dataIndex: 'major',
    },{
        title: '教学模块',
        dataIndex: 'module',
    },{
        title: '授课教师',
        dataIndex: 'teacher'
    },{
        title: '操作',
        scopedSlots: { customRender: 'action' },
        width:70
    }
]
const columns=[
    {
        title: '序号',
        dataIndex: 'index',
        width:70
    },{
        title: '课程名称',
        dataIndex: 'title',
    },{
        title: '专业方向',
        dataIndex: 'major',
    },{
        title: '教学模块',
        dataIndex: 'module',
    },{
        title: '授课教师',
        dataIndex: 'teacher'
    }
]
import eform from "@/components/common/form"
import eQuill from "@/components/common/eQuill"
import innerCommon from "@/components/common/innerCommon"
import eUpload from "@/components/common/eUpload"
import majorModule from "@/components/common/majorModule"
import confirmBox from "@/components/common/confirmBox"
import {getMajorListApi,getProgramDetailApi,getProgramCourseListApi,addProgramApi,updateProgramApi} from "@/request/api"
export default {
    name:'trainingProgramAdd',
    components:{innerCommon,eform,eQuill,eUpload,majorModule,confirmBox},
    created(){
        this.type=this.$route.query.id?1:0 
        if(this.type==1){
            this.programId=this.$route.query.id
            this.getToken(getMajorListApi,{},data=>{
                this.majorList=data.data
                this.getToken(getProgramDetailApi,{'programId':this.programId},res=>{
                    this.fields=res.data
                    this.fields.edPhase=res.data.edphase
                    this.quillInfo=res.data.content
                    this.imageUrl=res.data.cover
                    this.fields.majorId=res.data.major.id
                    this.fields.courseId=[]
                    res.data.ProgramCourse.forEach(item=>{
                        this.fields.courseId.push(item.id)
                    })
                    this.selectCourseList=res.data.ProgramCourse.map((item,index)=>({...item,index:index+1,'major':item.majors[0]&&item.majors[0].name,'module':item.majors[1]&&item.majors[1].name}))
                    this.selectCourseList.forEach(item=>{
                        this.selectedRowKeys.push(item.id)
                    })
                })
            })
            
        }
        this.location=[{
            name:"教学课堂管理",
            path:''
        },{
            name:"人才方案管理",
            path:'/trainingProgram'
        },{
            name:this.type==0?'新增':'修改',
            path:'/trainingProgramAdd'
        }]
        this.init()
    },
    data(){
        const formData=[
            {
                label:"教育阶段",
                scopedSlots: { customRender: 'edphase'}
            },{
                label:"专业方向",
                scopedSlots: { customRender: 'major'}
            },{
                label:"方案名称",
                prop:"title",
                placeholder:'请输入方案名称',
                rules:[{required:true,message:'请输入方案名称'}]
            },{
                label:"方案封面",
                scopedSlots: { customRender: 'cover'}
            },{
                label:"方案内容",
                scopedSlots: { customRender: 'content'}
            },{
                label:"推荐课程",
                scopedSlots: { customRender: 'course'}
            }
        ]
        return{
            selectCourseColumns,
            columns,
            formData,
            location:[],
            type:0,//0新增 1修改
            fields:null,
            selectedRowKeys: [],
            quillInfo:'',
            programId:'',
            imageUrl:'',
            edphaseList:[{name:'中职',id:0},{name:'高职',id:1},{name:'本科',id:2}],
            majorList:[],
            courseModal:false,
            pagination:{pageSize:10,total:0,current:1},
            courseList:[],
            searchInfo:{
                page:1,
                keyword:'',
                edphase:''
            },
            selectCourseList:[]
        }
    },
    methods:{
        init(){
            this.getToken(getMajorListApi,{},res=>{
                this.majorList=res.data
            })
        },
        returnBack(){
            this.$confirm({
                title: '确认返回吗?',
                cancelText:"取消",
                okText:'确定',
                onOk:()=>{
                    this.$router.go(-1)
                },
                onCancel() {
                },
            });
        },
        submitSearch(data){
            this.searchInfo.keyword=data.keyword
            this.searchInfo.page=1
            this.pagination.current=1
            if(data.moduleId&&data.moduleId!=0){
                this.searchInfo.majorId=data.moduleId
            }else{
                this.searchInfo.majorId=data.majorId==0?null:data.majorId
            }
            this.getCourseList()
        },
        getQuillContent(data){
            this.quillInfo=data
            this.$refs.form.form.setFieldsValue({['content']:data})
        },
        getUrl(data){
            this.$refs.form.form.setFieldsValue({['cover']:data})
            this.imageUrl=data
        },
        getCourseList(){
            this.getToken(getProgramCourseListApi,this.searchInfo,res=>{
                this.courseList=res.data.rows.map((item,index)=>({...item,index:(this.searchInfo.page-1)*10+index+1,'major':item.majors[0]&&item.majors[0].name,'module':item.majors[1]&&item.majors[1].name}))
                this.pagination.total=res.data.count
            })
        },
        openCourseBox(){
            this.getCourseList()
            this.courseModal=true
        },
        changePage(data){
            this.searchInfo.page=data.current
            this.pagination.current=data.current
            this.getCourseList()
        },
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys;
        },
        addCourse(){
            if(this.selectedRowKeys.length==0){
                this.$message.error('选择的课程不能为空')
                return
            }
            this.courseModal=false
            let isChange=false
            if(this.type==1){
                if(this.selectedRowKeys.length!=this.selectCourseList.length){
                    isChange=true
                }
                this.selectedRowKeys.forEach(item=>{
                    if(this.selectCourseList.filter(value=>value.id==item).length==0){
                        isChange=true
                    }
                })
            }
            if(isChange){
                this.$message.success('已修改')
            }else{
                this.$message.warning('无修改') 
            }
            this.selectCourseList=this.courseList.filter(item=>this.selectedRowKeys.indexOf(item.id)!=-1)
            this.$refs.form.form.setFieldsValue({['courseId']:this.selectedRowKeys})
        },
        deleteCourse(data){
            let index=this.selectedRowKeys.indexOf(data.id)
            this.selectedRowKeys.splice(index,1)
            this.selectCourseList=this.selectCourseList.filter(item=>item.id!=data.id)
        },
        handleEdphase(){

        },
        handleMajor(){

        },
        save(){
            this.$refs.form.form.validateFields().then(res=>{
                let api
                let formData=res
                if(this.type==0){
                    api=addProgramApi
                }else{
                    api=updateProgramApi
                    formData={...formData,'programId':this.programId}
                    
                }
                this.getToken(api,formData,data=>{
                    this.$message.success(data.message)
                    this.$router.push({path:'/trainingProgram'})
                })
            })
        },
    }
}
</script>
<style>
.programCourse .ant-table-tbody{
    border:1px solid #ddd
}
</style>
<style scoped lang="stylus">
.body
    min-height:610px
    .header
        padding-bottom:20px;
</style>